<template>
  <view style="position: relative;height: 100%">
    <SwiperLimitedLoad ref="swiper" @change="onPageChanged" @renderPage="renderPage" class="swiper">
      <template v-slot:content0>
        <QuestionDetail ref="page0" :storeId="storeId" :isManfen="isManfen"></QuestionDetail>
      </template>
      <template v-slot:content1>
        <QuestionDetail ref="page1" :storeId="storeId" :isManfen="isManfen"></QuestionDetail>
      </template>
      <template v-slot:content2>
        <QuestionDetail ref="page2" :storeId="storeId" :isManfen="isManfen"></QuestionDetail>
      </template>
    </SwiperLimitedLoad>
  </view>
</template>

<script>
import SwiperLimitedLoad from "@/components/SwiperLimitedLoad";
import QuestionDetail from "./QuestionDetail";
import questionCache from "@/libs/questionCache";

export default {
  name: 'SwiperDetail',
  props: ['type', 'height', 'kemu', 'storeId', 'isManfen'],
  components: {
    SwiperLimitedLoad,
    QuestionDetail
  },
  data() {
    return {
      data: {}
    }
  },
  mounted() {
    questionCache.getStore(this.storeId).subscribe('initList', this.setData)
    questionCache.getStore(this.storeId).subscribe('changeIndex', this.toChange)
  },
  methods: {
    json(o) {
      return JSON.stringify(o)
    },
    renderPage(list) {
      // // console.log('$refs', this.$refs)
      for (let i = 0; i < list.length; i++) {
        const item = list[i]
        if (item.data) {
          this.$refs['page' + i].setData(this.type, this.kemu, item.data, item.index)
        } else {
          this.$refs['page' + i].clearData()
        }
        // console.log('renderPage', i, item)
      }
    },
    onPageChanged(i, type) {
      // console.log('onPageChanged', type)
      if (type === "gesture") {
        // console.log('onPageChanged publish')
        questionCache.getStore(this.storeId).changeIndex(i)
        this.$emit('change', i)
      }
    },
    setData({index, list}) {
      this.$refs.swiper.setData(index, list)
    },
    toChange(i) {
      this.$refs.swiper.changeIndex(i)
    },
  }
}
</script>

<style lang='scss'>
.swiper {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100%;
}
</style>
